<template>
  <div class="ratingselect">
    <div class="rating-type border-1px">
      <span @click="select(2,$event)" :class="{'active':selectType===2}"
            class="block positive">{{desc.all}} <span class="count">{{ratings.length}}</span></span>
      <span @click="select(0,$event)" :class="{'active':selectType===0}"
            class="block positive">{{desc.positive}} <span class="count">{{positives.length}}</span></span>
      <span @click="select(1,$event)" :class="{'active':selectType===1}"
            class="block negative">{{desc.negative}} <span class="count">{{nagatives.length}}</span></span>
    </div>
    <div @click="toggleContent" :class="{'on':onlyContent}" class="switch">
      <span class="icon-check_circle"></span>
      <span class="text">只看有内容的评价</span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  // 选择查看评价类型
  // 正向评价
  const POSITIVE = 0;
  // // 负向评价
  const NEGATIVE = 1;
  const ALL = 2;
  export default {
    // 外部可以传入的组件
    props: {
      // 全部评价
      ratings: {
        type: Array,
        default() {
          return [];
        }
      },
      // 选择类型
      selectType: {
        type: Number,
        // 默认查看全部
        default: ALL
      },
      // 切换
      onlyContent: {
        type: Boolean,
        default: false
      },
      // 描述 传入的对象是由3个key
      desc: {
        type: Object,
        default() {
          return {
            all: '全部',
            positive: '满意',
            negative: '不满意'
          };
        }
      }
    },
    computed: {
      positives() {
        return this.ratings.filter((rating) => {
          return rating.rateType === POSITIVE;
        });
      },
      nagatives() {
        return this.ratings.filter((rating) => {
          return rating.rateType === NEGATIVE;
        });
      }
    },
    methods: {
      select(type, event) {
        // 解决PC端的重复点击问题
        if (!event._constructed) {
          return;
        }
        this.selectType = type;
        // 派发事件 通知父组件 我的内容改变了
        this.$dispatch('ratingtype.select', type);
      },
      toggleContent(event) {
        // 解决PC端的重复点击问题
        if (!event._constructed) {
          return;
        }
        this.onlyContent = !this.onlyContent;
        this.$dispatch('content.toggle', this.onlyContent);
      }
    }
  };
</script>

<style lang='stylus' rel='stylesheet/stylus'>
  @import "../../common/stylus/minxin.styl";
  .ratingselect
    .rating-type
      padding :18px 0
      margin :0 18px
      border-1px(rgba(7,17,27,0.1))
      font-size :0
      .block
        display :inline-block
        padding :8px 12px
        margin-right :8px
        border-radius :1px
        color :rgb(77,85,93)
        font-size :12px
        line-height :16px
        &.active
          color :#ffffff
        .count
          font-size :8px
          margin-left :2px
        &.positive
          background :rgba(0,160,220,0.2)
          &.active
            background :rgba(0,160,220,1)
        &.negative
          background :rgba(77,85,93,0.2)
          &.active
            background :rgba(77,85,93,1)


    .switch
      padding :12px 18px
      line-height : 24px
      border-bottom :1px solid rgba(7,17,27,0.1)
      color :rgb(147,153,159)
      font-size :0
      &.on
        .icon-check_circle
          color :#00c850
      .icon-check_circle
        display :inline-block
        vertical-align :top
        font-size :24px
        line-height :24px
        margin-right :4px
      .text
        font-size :12px
        display :inline-block
        vertical-align :top
</style>

